<template>
    <div class="addStudentsBox">
        <!-- 搜索栏 -->
        <!-- <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
              <input type="text" placeholder="搜索">
              <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div> -->
        <!-- 搜索栏 end-->

        <!-- header -->  
        <!-- <adminHeader></adminHeader>       -->
        <!-- header -->

        <!-- 添加学员 -->
        <div class="studentBox">
            <div class="studentHeader">
                <h3>添加学员</h3>
                <h4>已选{{checkedLists.length}}/可选数量{{maxLength}}</h4>
            </div>

            <table class="student-content">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" label="全选" name="type" v-model="isCheckAll" @change="checkedAll">
                        </th>
                        <th>头像</th>
                        <th>账号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>职位</th>
                        <th>创建时间</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="list in studentData" :key="list.id">
                        <td>
                            <input type="checkbox" :value='list' v-model="checkedLists" :disabled="isOverflow">
                        </td>

                        <td>
                            <img :src="list.headPictureUrl" alt="">
                        </td>
                        <td>{{list.mobile}}</td>
                        <td>{{list.name}}</td>
                        <td>{{list.age}}</td>
                        <td>{{list.gender}}</td>
                        <td>{{list.position}}</td>
                        <td>{{list.createTime}}</td>
                    </tr>
                </tbody>
            </table>
            <!-- <div>全选/取消 状态：{{ isCheckAll }}</div>
            <div>选中列表：{{ checkedLists }}</div> -->
             
            <!-- 分页 -->
            <el-pagination   v-show="studentData!=0"  background layout="prev, pager, next" :total="total" ></el-pagination>
            <!-- 分页 end-->
            
            <button class="joinUs" @click="join()">加入</button>

        </div>
        <!-- 添加学员 end-->
    </div>
</template>
<script>
import adminHeader from '../components/adminHeader.vue'
    export default {
        components:{
            adminHeader:adminHeader
        },
        props:['maxLength'],
        data(){
            return{
                // 是否全选
                isCheckAll:false,
                isOverflow:false,
                //
                checkedLists:[],
                // 学员数据
                studentData:[],
                // 总条数
                total:30,
            }
        },
        methods:{
            checkedAll () {
                // 判断 全选/反选 是否点击
                if (this.isCheckAll) {
                    let arr = []
                    // 循环全部数据并push到一个数组中
                    this.studentData.forEach(element => {
                        arr.push(element)
                    });
                    // 选中列表赋值，此时的arr已经是全部数据了，直接赋值就等于选中所有checkbox
                    this.checkedLists = arr
                } else {
                    // 如果 全选/反选 为假，则选中列表初始化
                    this.checkedLists = []
                };

                if(this.checkedLists.length > 10){
                    alert("只能添加10个成员")
                }
            },
            // 加入
            // 加入
            join(){
                let tmpData = JSON.parse(JSON.stringify(this.checkedLists))
                for (const key in tmpData) {
                    if (tmpData.hasOwnProperty(key)) {
                        const element = tmpData[key];
                        delete element.id
                        delete element.companyId
                        delete element.companyName
                        delete element.headPictureUrl
                        delete element.isDdelete
                        delete element.nickname
                        delete element.password
                        delete element.username
                        delete element.imgSrc
                        delete element.age
                        delete element.createTime
                    }
                }
                // console.log(tmpData)
                // return
                this.$emit('listenerAddStudent',tmpData);
                this.checkedLists = []
            },
            // 
            checkItem(){
                this.checkedLists = !this.checkedLists ;
                console.log("是否被选中："+ this.checkedLists)
            },
            // 获取所有数据
            getAllData(){
                let companyId = JSON.parse(sessionStorage.getItem('login')).companyId;
                let data = {
                    companyId : companyId
                }
                // console.log(data)
                this.$http.getAvailableStudent(data,(res)=>{
                    this.studentData = res.data
                    console.log(res)
                },(errRes)=>{
                    console.log(errRes)
                })
            }
        },
         watch: {
            // 监听选中列表属性，当选中列表发生变化时，会运行此方法
            checkedLists (newValue, oldValue) {
                // 每次运行时，判断当前选中列表中的数组个数是否等于全部数据的数组个数，如果到某一时刻全等，则全选按钮为选中
                if (newValue.length === this.studentData.length) {
                    this.isCheckAll = true
                } else {
                    // 否则为取消
                    this.isCheckAll = false
                }

                // 1. 获取input为checkbox的原始dom元素，勾选和取消勾选都会走这里
                let checkboxInputArr = document.getElementsByClassName('student-content')[0].lastElementChild.getElementsByTagName('input')
                // 2. 获得input为一个数组，所以要循环一边
                for (const key in checkboxInputArr) {
                    if (checkboxInputArr.hasOwnProperty(key)) {
                        const element = checkboxInputArr[key];
                        // 3. 判断当前选中的数量是否大于等于最大可选数量，如果大于等于了，则剩下未被勾选的input需要被禁止点击
                        if (newValue.length >= this.maxLength && newValue.length != 0){
                            // 4. 到这里就已经选满了，所以这里要做的就是找到未被勾选的元素并禁止
                            if (element.checked == false) {
                                element.disabled = true
                            }
                        } else {
                            // 5. 如果未选满，所有input的disabled都必须要为false，就是说如果选了某一个，另一个被禁止了，但是现在又不想选这个了，想选那个被禁止的对象，但是那个对象是被禁止了的，还不能点击，只能先取消之前所选择的input，然后会触发这里的条件，把所有的元素disabled设置为false就都能点击了，然后就可以点击另一个元素了，
                            element.disabled = false
                        }
                    }
                }
            }
        },
        mounted(){
            this.getAllData();
        },
        beforeUpdate(){
            console.log('beforeUpdate')
        }    
    }
</script>

